<template>
  <div>
    <van-overlay
      :show="props.open"
      :lock-scroll="false"
      z-index="100"
      class="flex justify-center items-center w-full"
    >
      <div
        class="bg-[#1a2c38] text-white p-4 rounded-lg max-w-[500px] w-full max-h-120 overflow-auto"
      >
        <div class="flex justify-between items-center mb-4">
          <div class="text-base font-bold">
            <van-icon name="setting-o" /> {{ $t("page.wheel.information") }}
          </div>
          <button class="text-gray-400 hover:text-gray-200">
            <van-icon @click="close" class="cursor-pointer" name="cross" />
          </button>
        </div>

        <div class="flex flex-col justify-center items-center">
          <img class="w-20" :src="prezesMap[prizeData?.type]" alt="" />
          <div>{{ prizeInfo[prizeData?.type] }}</div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script setup>
defineOptions({
  name: "prizeResultDialog"
});

import { ref, getCurrentInstance, watch } from "vue";
import { prezesMap } from "../prizes";
const {
  appContext: {
    config: { globalProperties }
  }
} = getCurrentInstance();

const prizeInfo = ref({});

const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => {}
  }
});

const prizeData = ref("");

const emit = defineEmits();

const close = () => {
  emit("close");
};

watch(
  () => props.open,
  newVal => {
    if (newVal) {
      console.log("11==================", props.data);
      prizeData.value = props.data;
      prizeInfo.value = {
        luck: `${globalProperties
          .$t("page.lucky.lucky_value")
          .replace("*", prizeData?.value?.data?.value)}`,
        again: `${globalProperties.$t("page.lucky.again")}`,
        coins: `${globalProperties
          .$t("page.lucky.coins_value")
          .replace("*", prizeData?.value?.data?.value)}`,
        none: `${globalProperties.$t("page.lucky.none")}`
      };
    }
  }
);
</script>

<style scoped lang="less"></style>
